import 'package:flutter/material.dart';
import 'package:flutter_demo/config/app_colors.dart';
import 'package:flutter_demo/view/root_pages/create_media.dart';
import 'package:flutter_demo/view/root_pages/home_page.dart';
import 'package:flutter_demo/view/root_pages/music_page.dart';
import 'package:flutter_demo/view/root_pages/profile.dart';
import 'package:flutter_demo/view/root_pages/tiny_video.dart';
import 'package:proste_indexed_stack/proste_indexed_stack.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

// 底部导航定义集合
const Map<String, String> _bottomNames = {
  'home': '首页',
  'music': '音乐',
  'create_media': '',
  'tiny_video': '小视频',
  'profile': '我的'
};

class _RootPageState extends State<RootPage> {
  // 底部导航选中索引
  int _currentIndex = 0;

  // 底部导航选项集合
  final List<BottomNavigationBarItem> _bottomNavBarList = [];
  // 页面集合
  final List<IndexedStackChild> _pagesList = [
    IndexedStackChild(child: HomePage()), // 首页
    IndexedStackChild(child: MusicPage()), // 首页
    IndexedStackChild(child: CreateMedia()), // 首页
    IndexedStackChild(child: TinyVideo()), // 首页
    IndexedStackChild(child: Profile()), // 首页
    // MusicPage(), // 音乐页面
    // CreateMedia(), // 发布媒体页面
    // TinyVideo(), // 小视频页面
    // Profile() // 我的页面
  ];

  @override
  void initState() {
    super.initState();
    _bottomNames.forEach((key, value) {
      _bottomNavBarList.add(_bottomNavigationBarItem(key, value));
    });
  }

  // 底部切换
  void _onTapClick(int index) {
    if (index == 2) {
      return _onCreateMedia();
    }
    setState(() {
      _currentIndex = index;
    });
  }

  // 点击发布按钮
  void _onCreateMedia() {
    print('点击发布按钮');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ProsteIndexedStack(
        index: _currentIndex,
        children: _pagesList,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: _bottomNavBarList,
        currentIndex: _currentIndex,
        onTap: _onTapClick,
        type: BottomNavigationBarType.fixed,
        // backgroundColor: ,
      ),
      floatingActionButton: _createMediaButton(),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.miniCenterDocked,
    );
  }

  // 发布按钮
  Widget _createMediaButton() {
    return Container(
      width: 44,
      height: 44,
      margin: EdgeInsets.only(top: 56),
      child: FloatingActionButton(
        backgroundColor: AppColors.nav,
        child: Image.asset(
          'assets/images/icons/create_media.png',
        ),
        onPressed: _onCreateMedia,
      ),
    );
  }

  // 底部导航的每一项组件
  BottomNavigationBarItem _bottomNavigationBarItem(String key, String value) {
    return BottomNavigationBarItem(
        icon: Image.asset(
          'assets/images/icons/$key.png',
          width: 24,
          height: 24,
        ),
        activeIcon: Image.asset(
          'assets/images/icons/${key}_active.png',
          width: 24,
          height: 24,
        ),
        label: value,
        tooltip: '');
  }
}
